<script setup>
import {ref} from 'vue'
const recommendHello=ref([])
const recommendList=ref([])
const recommendCustomizeList=ref([])
const showLeft=ref()
const getRecommendHello=()=>{
				uni.request({
					url: 'http://localhost:3008/recommendHello',
					method: 'GET',
					data: {},
					success: res => {
						recommendHello.value=res.data
					},
					fail: () => {},
					complete: () => {}
				})
			}
const getRecommendList=()=>{
				uni.request({
					url: 'http://localhost:3008/recommendList',
					method: 'GET',
					data: {},
					success: res => {
						recommendList.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
const getRecommendCustomize=()=>{
				uni.request({
					url: 'http://localhost:3008/recommendCustomize',
					method: 'GET',
					data: {},
					success: res => {
						recommendCustomizeList.value=res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}	
const goToSearch=()=>{
	uni.navigateTo({
		url:'/pages/search/search'
	})
}
const showDrawer=()=>{
	showLeft.value.open()
}
const closeDrawer=()=>{
	showLeft.value.close()
}
getRecommendHello()
getRecommendList()
getRecommendCustomize()
const childrenRef=ref()
const open=()=>{
	childrenRef.value.open('bottom')
}


</script>

<template>
	<view class="container">
		<view class="header">
			
			<view class="search">
			    <img src="../../static/更多.png" class="img1" style="margin-top: 5px;" @click="showDrawer"/>
			    <view class="sub-search">
			        <img src="../../static/搜索.png" >
			        <input @focus="goToSearch" type="text" placeholder="Drake新歌:&nbsp;&nbsp;Push&nbsp;&nbsp;Ups">
			    </view>
			    <img src="../../static/maikefeng.png" style="margin-top: 5px;">
			</view>
			<!-- <view class="header-top">
				<img src="../../static/更多.png" class="img1" style="margin-top: 10px;" @click="showDrawer"/>
				<view class="search"><img src="../../static/搜索.png"/><span>Drake新歌:&nbsp;&nbsp;Push&nbsp;&nbsp;Ups</span></view>
				<img src="../../static/maikefeng.png" style="margin-top: 10px;">
			</view> -->
			<view class="out-recommend">
				<view class="hello">
					<span>下午好</span>
					<span class="vip">VIP 0.25/天升SVIP，享有声好书></span>
				</view>
				<view class="recommend">
					<view class="recommend1" v-for="item in recommendHello">
						<img :src="item.pic" alt="">
						<view class="recommend-title">
							{{item.listName}}
						</view>
						<view class="recommend-content">
							<span>{{item.card}}</span>
						</view>
						<view class="recommend-card">
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="list-name">
			<span>溺毙20的歌单</span>
		</view>
		
		<view class="main-content">
			<view class="content" v-for="item in recommendList">
				<img :src="item.pic">
				<span>{{item.listName}}</span>
			</view>
		</view>
		
		
		<view class="list-name" style="margin-top: 30px;">
			<span>听过的Udiggwhatiamsayin定制</span>
		</view>
		<view class="personal">
			<view class="list" v-for="item in recommendCustomizeList">
				<view class="list-content">
					<img :src="item.coverImg" class="cover">
					<view class="out-content">
						<span>{{item.musicName}}</span>
						<view class="littile-content">
							<span class="littile-num">{{item.collectNum}}</span>
							<span class="littile-num">{{item.songSinger}}</span>
						</view>
					</view>
				</view>			
				<img src="../../static/bofang.png" class="pause">
			</view>
		</view>
		
		<bottomBar @click="open()"></bottomBar>
		<uni-drawer :width="320" mode="left" ref="showLeft" >
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<drawer></drawer>
				</scroll-view>
			</view>
		</uni-drawer>
		<uni-popup ref="childrenRef" background-color="#1b1b23"  type="bottom">
			<popup></popup>
		</uni-popup>
		
		
	</view>
</template>

<style scoped>

.container{
	background-color:#1b1b23;
	margin: 0 auto;
	color: #eaebf0;
}
/* .header-top{
	display: flex;
	justify-content: space-around;
}
.header-top img{
	width: 30px;
	height: 30px;
}
.search{
	width: 80%;
	height: 50px;
	border-radius: 30px;
	background-color: #45475d;
	position: relative;
	display: flex;
	justify-content: flex-start;
	opacity: 70%;
}
.search img{
	position: absolute;
	top:10px;
	left: 10px;
}
.search span{
	position: absolute;
	top:15px;
	left: 50px;
	color: #fff;
	opacity: 60%;
} */
.search{
    display: flex;
    justify-content: space-between;
    width:90%;
    height:40px;
    line-height: 40px;
    margin:0 auto;
	margin-bottom: 20px;
}
.search img{
    width: 30px;
    height: 30px;
    margin-top: 5px;
}
.sub-search{
    width: 76%;
    background-color: #32323a;
    border-radius: 20px;
    display: flex;
}
.sub-search :nth-child(1){
    margin-left: 10px;
}
.sub-search :nth-child(2){
    height: 100%;
    width:200px;
    margin-left: 5px;
}

/* .out-recommend{
	
} */
.hello{
	margin-top: 15px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	margin-left: 5px;
}
.hello span{
	font-size: 24px;
	height: 30px;
	line-height: 30px;
}
.hello .vip{
	font-size: 14px;
	background-color: #272832;
	width: 60%;
	text-align: center;
	margin-right: 10px;
	border-radius: 30px;
}
.recommend{
	padding: 0;
	margin-top: 10px;
	display: flex;
	flex-wrap: nowrap;
	overflow: scroll;
	width: 100%;
}
.recommend1{
	/* background:url('../../static/tx.jpg')center no-repeat; */
	width:150px;
	height: 180px;
	border-radius: 10px;
	margin: auto 10px;
	position: relative;
	/* overflow: hidden; */
	
}
.recommend1 img{
	width: 160px;
	height: 100%;
	border-radius: 10px;
}
.recommend-title{
	color: #fff;
	position: absolute;
	top: 10px;
	left: 8px;
	font-weight:800;
}
.recommend-content{
	width: 160px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	bottom: 0;
	font-size: 14px;
	text-align: center;
	color: #fff;
}
.recommend-card{
	width: 160px;
	height: 30px;
	position: absolute;
	bottom:0;
	background-color: #fff;
	opacity: 0.1;
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
}

.list-name{
	margin-top: 20px;
	color: #fff;
	font-weight: 500;
	margin-left: 5px;
}
.main-content{
	margin-top: 5px;
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	overflow: scroll;
}
.content{
	display: flex;
	flex-direction:column;
	width: 25%;
	padding: 5px;
}
.content img{
	height: 120px;
	border-radius:5px;
}
.content span{
	color: #fff;
	opacity: 90%;
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	margin-top: 5px;
}


.personal{
	display: flex;
	flex-direction:column;
	color: #fff;
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 50px;
}
.list{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 60px;
}
.list-content{
	display: flex;
	flex-direction: row;
}
.list-content .cover{
	width: 50px;
	height: 50px;
	border-radius:5px;

}
.list-content .out-content{
	margin: 5px;
}
.littile-content :nth-child(2){
	margin-left: 5px;
}
.list .pause{
	width: 20px;
	height: 20px;
	margin-top: 10px;
	
}
.uni-drawer__content{
	background-color: #151515;
	
}
.uni-drawer__content{
	background-color: #151515;
	
}
.uni-drawer__content--visible img{
	width: 30px;
	height: 30px;
}

</style>
